<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="工作台" hidden-breadcrumb>
                <div slot="content">
                    <Avatar class="dashboard-workplace-header-avatar"
                        :src="info.head_img_url ? info.head_img_url : infoImg" alt="" />
                    <div class="dashboard-workplace-header-tip">
                        <p class="dashboard-workplace-header-tip-title">
                            {{ greetings }}，{{ info.realname }}，{{ network }}
                        </p>
                        <p class="dashboard-workplace-header-tip-desc">
                            今日{{ weatherData.type }}，{{ weatherData.low }}~{{
                            weatherData.high
                            }}，{{ weatherTips }}
                        </p>
                    </div>
                </div>
                <div slot="extra" class="dashboard-workplace-header-extra">
                    <Row type="flex" justify="center" align="middle" :gutter="12">
                        <Col span="8">
                        <p>
                            <Avatar icon="md-apps" size="small" v-color="'#40a9ff'" v-bg-color="'#e6f7ff'" />
                            <span>患者数</span>
                        </p>
                        <p>
                            <a @click="topatient" :disabled="
                                        !todolist.userCount ||
                                        +todolist.userCount === 0
                                    ">{{ todolist.userCount || 0 }}</a>
                        </p>
                        </Col>
                        <Col span="8">
                        <p>
                            <Avatar icon="md-checkbox-outline" size="small" v-color="'#ffa940'"
                                v-bg-color="'#fff7e6'" />
                            <span>今日回访</span>
                        </p>
                        <p>
                            <Tooltip placement="top" :content="`已回访：${
                                        todolist.todayCallbackCount || 0
                                    } / 待回访：${
                                        todolist.todoCallbackCount || 0
                                    }`">
                                <a @click="toreturnvisit(1)" :disabled="
                                            !todolist.todayCallbackCount ||
                                            +todolist.todayCallbackCount === 0
                                        ">{{
                                    todolist.todayCallbackCount || 0
                                    }}</a>
                                /
                                <a @click="toreturnvisit(0)" :disabled="
                                            !todolist.todoCallbackCount ||
                                            +todolist.todoCallbackCount === 0
                                        ">{{
                                    todolist.todoCallbackCount || 0
                                    }}</a>
                            </Tooltip>
                        </p>
                        </Col>
                        <Col span="8">
                        <p>
                            <Avatar icon="md-apps" size="small" v-color="'#40a9ff'" v-bg-color="'#e6f7ff'" />
                            <span>过期未回访</span>
                        </p>
                        <p>
                            <a @click="toreturnvisit(4)" :disabled="
                                        !todolist.overdueCallbackCount ||
                                        +todolist.overdueCallbackCount === 0
                                    ">{{ todolist.overdueCallbackCount || 0 }}</a>
                        </p>
                        </Col>
                    </Row>
                </div>
            </PageHeader>
        </div>
        <div class="i-layout-page-header">
            <PageHeader hidden-breadcrumb :tab-list="tabList" :tab-active-key="tabActiveKey"
                @on-tab-change="handleChangeTab">
            </PageHeader>
        </div>
        <Row :gutter="24" class="ivu-mt">
            <Card :bordered="false" dis-hover class="ivu-mb">
                <div class="i-table-no-border">
                    <Table highlight-row ref="table" :columns="columns" :data="list" :loading="loading" size="small"
                        @on-sort-change="sortchange">
                        <template slot-scope="{ row }" slot="info">
                            <a @click="handleDetailPatient(row)">{{ row.name }}&nbsp;{{
                                row.gender_str
                                }}&nbsp;{{ row.age }}</a>
                        </template>
                        <template slot-scope="{ row }" slot="state">
                            <Tag v-if="row.status_name === '失效'" color="blue">{{ row.status_name }}</Tag>
                            <Tag v-else-if="row.status_name === '跟进中'" color="volcano">{{ row.status_name }}</Tag>
                            <Tag v-else-if="row.status_name === '预约'" color="cyan">{{ row.status_name }}</Tag>
                            <Tag v-else-if="row.status_name === '到诊'" color="green">{{ row.status_name }}</Tag>
                            <Tag v-else-if="row.status_name === '已到老患者'" color="orange">{{ row.status_name }}</Tag>
                            <Tag v-else-if="row.status_name" color="orange">{{
                                row.status_name
                                }}</Tag>
                        </template>
                        <template slot-scope="{ row }" slot="label">
                            <Tooltip content="Bottom Center text" placement="bottom">
                                <Tag v-if="+index <= 2" v-for="(item,
                                    index) in row.patient_tags_name_arr" :key="index">{{ item }}</Tag>
                                <Tag slot="content" v-for="(item,
                                    index) in row.patient_tags_name_arr" :key="index">{{ item }}</Tag>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row }" slot="city_name">
                            <span>{{
                                row.city_name === "0" ? "" : row.city_name
                                }}</span>
                        </template>
                        <template slot-scope="{ row }" slot="action">
                            <a v-hasC="{
                                    name: 'patient-index-edit-info2',
                                    flag: 'v1/patient/index/edit-info',
                                }" @click="handleOpenDrawer(row)">编辑</a>
                            <Divider type="vertical" />
                            <a v-hasC="{
                                    name: 'patient-callback-common-list',
                                    flag: 'v1/patient/callback/common-list',
                                }" @click="handleReturnVisit(row.id)">
                                回访
                            </a>
                        </template>
                    </Table>
                    <div class="ivu-mt iuv-text-center" slot="footer" style="text-align: center;">
                        <Page show-total show-elevator show-sizer :total="total" :current.sync="params.page"
                            :page-size="params.pageSize" :page-size-opts="pageOpts" @on-change="formSize"
                            @on-page-size-change="formChangePage" />
                    </div>
                    <patient-detail ref="patientDetail" :btnShow="btnShow" @cancelDrawer="askData" @askData="askData" />
                    <edit-patient ref="editPatient" @patientfun="askData" v-if="!loading" />
                    <!-- <return-visit ref="returnVisit" /> -->
                    <return-visit ref="returnVisit" @patientfuns="askData" />
                </div>
            </Card>
        </Row>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    import { todotodolist } from "@api/hqapi";
    import axiosApi from "axios";
    import random from "@/libs/random_str";
    import patientDetail from "@/components/patientDetail";
    import editPatient from "@/components/editPatient";
    import returnVisit from "@/components/returnVisit";
    import mixin from "../mixins";
    import dayjs from "dayjs";
    export default {
        name: "visit",
        mixins: [mixin],
        components: { patientDetail, editPatient, returnVisit },
        data() {
            return {
                infoImg: require("@/assets/images/avater.png"),
                weatherData: {},
                weatherTips: "",
                tabActiveKey: "visit",
                loading: false,
                todolist: {},
                greetings: "早上好",
                network: "开始您一天的工作吧！",
                timer: null,
                btnShow: [
                    {
                        name: "patient-index-sub4",
                        flag: "v1/patient/index/sub",
                    },
                    {
                        name: "patient-index-edit-remark4",
                        flag: "v1/patient/index/edit-remark",
                    },
                    {
                        name: "patient-index-update8",
                        flag: "v1/patient/index/update",
                    },
                    {
                        name: "patient-callback-callback-common-list1",
                        flag: "v1/patient/callback/callback-common-list",
                    },
                    {
                        name: "patient-index-edit-tags9",
                        flag: "v1/patient/index/edit-tags",
                    },
                    {
                        name: "patient-index-edit-tags6",
                        flag: "v1/patient/index/edit-tags",
                    },
                ],
                columns: [
                    {
                        title: "基本信息",
                        key: "basic",
                        slot: "info",
                        minWidth: 150,
                        fixed: "left",
                    },
                    // { title: '微信号', key: 'wx', minWidth: 108 },
                    {
                        title: "患者状态",
                        key: "state",
                        slot: "state",
                        minWidth: 120,
                    },
                    // { title: '归属人', key: 'belonger', minWidth: 80 },
                    {
                        title: "未访天数",
                        sortable: "custom",
                        key: "diff_day",
                        minWidth: 108,
                    },
                    {
                        title: "待回访时间",
                        key: "next_callback_time_str",
                        sortable: "custom",
                        minWidth: 118,
                    },
                    // { title: '上次回访时间', key: 'preTime', sortable: 'custom', minWidth: 135 },
                    {
                        title: "上次回访人",
                        key: "last_callback_user",
                        minWidth: 108,
                    },
                    {
                        title: "回访次数",
                        key: "callback_count",
                        sortable: "custom",
                        minWidth: 108,
                    },
                    {
                        title: "患者标签",
                        key: "label",
                        slot: "label",
                        minWidth: 308,
                    },
                    {
                        title: "城市",
                        key: "city_name",
                        slot: "city_name",
                        minWidth: 100,
                    },
                    { title: "病种", key: "patient_diseases_name", minWidth: 100 },
                    { title: "来源", minWidth: 120, key: "source_name" },
                    { title: "备注/回访", minWidth: 150, key: "remark", ellipsis: true, tooltip: true },
                    {
                        title: "操作",
                        minWidth: 118,
                        slot: "action",
                        fixed: "right",
                    },
                ],
                list: [],
                // 请求参数
                params: {
                    page: 1,
                    pageSize: 10,
                    sort_callback_count_type: "",
                    next_callback_time_type: "",
                    last_callback_time_type: "",
                },
                total: 0,
                pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
            };
        },
        computed: {
            ...mapState("admin/user", ["info"]),
        },
        mounted() {
            this.timegreetings();
            this.initial();
        },
        /* 销毁之前 */
        beforeDestroy() {
            if (this.timer) clearInterval(this.timer);
        },
        methods: {
            timegreetings() {
                this.timerworker();
                this.timer = setInterval(() => {
                    this.timerworker();
                }, 60000);
            },
            timerworker() {
                let date = dayjs().$H;
                if (+date >= 3 && +date <= 10) {
                    this.greetings = "早上好";
                    this.network = "开始您一天的工作吧！";
                } else if (+date > 10 && +date <= 12) {
                    this.greetings = "中午好";
                    this.network = "小憩一会儿吧！";
                } else if (+date > 12 && +date <= 17) {
                    this.greetings = "下午好";
                    this.network = "专注于眼前的事情！";
                } else if (+date > 17 && +date <= 21) {
                    this.greetings = "傍晚好";
                    this.network = "喝杯咖啡提个神吧！";
                } else if (+date > 21 || +date < 3) {
                    this.greetings = "晚上好";
                    this.network = "累了早点休息吧！";
                }
            },
            // 初始化
            initial() {
                this.askData();
                this.initWeather();
            },
            initWeather() {
                const that = this;
                // 去到当前电脑ip
                // eslint-disable-next-line no-undef
                const cip = returnCitySN["cip"];
                axiosApi
                    .get(
                        "https://www.tianqiapi.com/api/?appid=41678296&appsecret=ZKo4gjcw&version=v6&ip=" +
                        cip
                    )
                    .then(function (response) {
                        that.weatherData = {
                            type: response.data.wea,
                            low: response.data.tem2 + "℃",
                            high: response.data.tem1 + "℃",
                        };
                        that.weatherTips = response.data.air_tips;
                    })
                    .catch(function (error) {
                    });
            },
            // 请求数据
            askData() {
                this.loading = true;
                todotodolist(this.params).then((res) => {
                    this.todolist = res.count;
                    this.total = res.total;
                    this.list = res.list;
                    this.loading = false;
                });
            },
            topatient() {
                let query = { member_id: this.todolist.member_id };
                this.$router.push({ path: "/business/patient", query });
            },
            toreturnvisit(type) {
                let query = { type, member_id: this.todolist.member_id };
                this.$router.push({ path: "/business/returnVisit", query });
            },
            sortchange(e) {
                if (e.key === "callback_count") {
                    this.params.next_callback_time_type = "";
                    this.params.last_callback_time_type = "";
                    if (e.order === "asc") {
                        this.params.sort_callback_count_type = 1;
                    } else if (e.order === "desc") {
                        this.params.sort_callback_count_type = 2;
                    } else {
                        this.params.sort_callback_count_type = 0;
                    }
                } else if (e.key === "diff_day") {
                    this.params.next_callback_time_type = "";
                    this.params.sort_callback_count_type = "";
                    if (e.order === "asc") {
                        this.params.last_callback_time_type = 1;
                    } else if (e.order === "desc") {
                        this.params.last_callback_time_type = 2;
                    } else {
                        this.params.last_callback_time_type = 0;
                    }
                } else {
                    this.params.last_callback_time_type = "";
                    this.params.sort_callback_count_type = "";
                    if (e.order === "asc") {
                        this.params.next_callback_time_type = 1;
                    } else if (e.order === "desc") {
                        this.params.next_callback_time_type = 2;
                    } else {
                        this.params.next_callback_time_type = 0;
                    }
                }
                this.askData();
            },
            /* @函数功能: 分页 */
            formSize(e) {
                this.params.page = e;
                this.askData();
            },
            /* @函数功能: 每页数量 */
            formChangePage(e) {
                this.params.pageSize = e;
                this.askData();
            },
            handleOpenDrawer(row) {
                this.$refs.editPatient.handleEdit(row);
            },
            handleDetailPatient(row) {
                this.$refs.patientDetail.handleOpen(row);
            },
            handleReturnVisit(id) {
                this.$refs.returnVisit.handleReturnVisit(id);
            },
        },
    };
</script>
<style lang="less">
    .dashboard-workplace {
        &-header {
            &-avatar {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                margin-right: 16px;
            }

            &-tip {
                display: inline-block;
                vertical-align: middle;

                &-title {
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 12px;
                }

                &-desc {
                    color: #808695;
                }
            }

            &-extra {
                .ivu-col {
                    p {
                        text-align: right;
                    }

                    p:first-child {
                        span:first-child {
                            margin-right: 4px;
                        }

                        span:last-child {
                            color: #808695;
                        }
                    }

                    p:last-child {
                        font-size: 22px;
                    }
                }
            }
        }
    }

    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;
    }

    .c-inr {
        margin: 0 10px;
    }

    .b-phone {
        line-height: 26px;
        font-size: 12px;
    }

    h4 span {
        margin-left: 5px;
    }

    .side-bg {
        background: #f2f2f2;
        padding: 24px !important;
    }

    .return-form {
        padding: 24px;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
        padding: 24px 0 0 24px;
    }

    .sky-screen {
        margin-top: 16px;
    }
</style>
<style>
    .ivu-page-header-extra {
        width: 340px;
    }

    .model .ivu-modal-body {
        padding: 0px;
    }
</style>